<template>
  <Card title="待办事项" v-bind="$attrs">
    <template #extra>
      更新时间：{{ state.refreshDatetime }}
      <a-button size="small" type="link" @click="onRefresh">点击刷新</a-button>
    </template>

    <CardGrid v-for="item in state.groupItems" :key="item.title" class="!md:w-1/4 !w-full">
      <span class="flex">
        <Icon :color="item.color" :icon="item.icon" size="30" />
        <span class="ml-4">{{ item.title }}</span>
      </span>
      <div class="flex mt-2 h-10 text-2xl">{{ item.value }}</div>
      <div class="flex justify-between text-secondary">
        <span>{{ item.group }}</span>
        <span>
          <a-button
            size="small"
            @click="
              router.push({
                path: item.route,
                query: item.routeQuery,
              })
            "
            >点击查看</a-button
          >
        </span>
      </div>
    </CardGrid>
    <CardGrid v-if="state.groupItems.length == 0" class="w-full"> 待办列表为空</CardGrid>
  </Card>
</template>
<script lang="ts" setup>
  import { Card, CardGrid } from 'ant-design-vue';
  import { reactive } from 'vue';
  import { useRouter } from 'vue-router';
  import Icon from '@/components/Icon/Icon.vue';
  import { getWorkbenchProject } from '@/modules/dashboard/api';
  import { useMessage } from '@/hooks/web/useMessage';
  import dayjs from 'dayjs';

  const { createMessage } = useMessage();
  const router = useRouter();
  const state = reactive({
    groupItems: [] as any,
    refreshDatetime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
  });

  getWorkbenchProject().then((res) => {
    if (res.data.length > 0) {
      state.groupItems = res.data;
    }
  });

  const onRefresh = async () => {
    await getWorkbenchProject().then((res) => {
      if (res.data.length > 0) {
        state.groupItems = res.data;
      }
      state.refreshDatetime = dayjs().format('YYYY-MM-DD HH:mm:ss');
      createMessage.success(res.message);
    });
  };
</script>
